import { memo, useCallback, useEffect, useRef, useState } from "react";
import {
  ActionType,
  PageContainer,
  ProTable,
} from "@ant-design/pro-components";
import CourseStyle from "./style";
import { columnsConfig, productStatustype, ProductType } from "./config";
import { Button, message } from "antd";
import { PlusOutlined } from "@ant-design/icons";
import Edit from "./cpms/edit";
import { shallowEqual, useSelector } from "react-redux";
import { RootState } from "../../store";
import {
  useFetch_commitProduct,
  useFetch_delProduct,
  useFetch_getProducts,
} from "../../service/product";
import ProductCard from "./cpms/productCard";
import { useFetchgetCrouses_sample } from "../../service/course";

const Product = memo(() => {
  const [pageCount, setPageCount] = useState(1);
  const [openDrawer, setOpenDrawer] = useState(false);
  const [currentId, setCurrentId] = useState<undefined | string>(undefined);
  const [openCard, setOpenCard] = useState(false);

  const { refetch, data, getLoading } = useFetch_getProducts(pageCount, 10);
  const [delProduct, delLoading] = useFetch_delProduct();
  const [editProduct, editLoading] = useFetch_commitProduct();
  const courses = useFetchgetCrouses_sample();

  const { org } = useSelector(
    (state: RootState) => ({
      org: state.orgReducer.currentOrg,
    }),
    shallowEqual
  );

  // 改变门店刷新
  useEffect(() => {
    void actionRef?.current?.reload();
  }, [org]);

  const actionRef = useRef<ActionType>();

  const closeDrawer = useCallback((isEdit?: boolean) => {
    setOpenDrawer(false);
    if (isEdit) {
      void actionRef?.current?.reload();
    }
  }, []);
  const closeCard = useCallback(() => {
    setOpenCard(false);
  }, []);

  const pageListClick = (page: number) => {
    setPageCount(page);
  };

  const putawayClick = (id: string, status: productStatustype) => {
    editProduct(id, { status }, (isReload) => {
      if (isReload) void actionRef?.current?.reload();
    });
  };

  const editClick = (id: string) => {
    setOpenDrawer(true);
    setCurrentId(id);
  };
  const cardClick = (id: string) => {
    setOpenCard(true);
    setCurrentId(id);
  };

  const delClick = (id: string) => {
    delProduct(id).then(() => {
      void refetch({
        pageSize: 10,
        current: pageCount,
      }).then(() => {
        void actionRef?.current?.reload();
        void message.success("删除成功");
      });
    });
  };

  return (
    <CourseStyle>
      <PageContainer>
        <ProTable<ProductType>
          actionRef={actionRef}
          dataSource={data}
          loading={getLoading || delLoading || editLoading}
          form={{
            ignoreRules: false,
          }}
          columns={columnsConfig({
            editClick,
            cardClick,
            delClick,
            putawayClick,
          })}
          request={refetch}
          toolBarRender={() => [
            <Button
              key="add"
              type="primary"
              icon={<PlusOutlined />}
              onClick={() => {
                setOpenDrawer(true);
                setCurrentId(undefined);
              }}
            >
              新建
            </Button>,
          ]}
          pagination={{
            defaultPageSize: 10,
            showSizeChanger: false,
            onChange: pageListClick,
            current: pageCount,
          }}
        />
        {openDrawer && (
          <Edit open={openDrawer} close={closeDrawer} id={currentId} />
        )}
        {openCard && (
          <ProductCard
            open={openCard}
            close={closeCard}
            id={currentId}
            courses={courses}
          />
        )}
      </PageContainer>
    </CourseStyle>
  );
});

export default Product;
